<script setup lang='ts'>
import { PureTableBar } from "@/components/RePureTableBar";
import { usePortrait } from "./hooks/ApprovalOffer";
import InformationParpre from './component/SpvInformationPrepar.vue'
import SpvProjectCase from './component/SpvProjectCase.vue'
import {
  CirclePlusFilled
} from "@element-plus/icons-vue";
const {
  columns,
  columns1,
  showReport,
  filterSelectId,
  dataList,
  informationDialog,
  declareDialog,
  filterProject,
  showInformation,
  selectItem,
  declareList,
  isShowSave,
  filterDataList,
  projectpProposalsData,
  allNeedDay,
  selectName,
  saveCase,
  reportData,
  showInformationDetail,
  isApprove,
  approveDialog,
  saveApprove,
  reportList,
  showReportDetail,
  announcementData,
  announcementDialog
} = usePortrait()
import { ref, reactive, nextTick, watch } from "vue";
</script>

<template>
  <div style="margin-left: 20px;">
    <span :class="showReport == false ? 'blue-text' : ''" @click="showReport = false" style="cursor: pointer; ">
      项目审批
      <!-- 激活 -->
    </span>
    <span :class="showReport == false ? '' : 'blue-text'" style="cursor: pointer;margin-left: 50px;"
      @click="showReport = true">
      发行公告
      <!-- 激活 -->
    </span>
  </div>

  <div v-if="!showReport">
    <div class="main">
      <PureTableBar class="list_hei" title="项目审批列表">
        <template v-slot="{ size, checkList }">
          <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" size="small" :data="dataList"
            :columns="columns" :checkList="checkList" max-height="600" :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }">
            <template #operation="{ row }">
              <el-button type="primary" size="small" text @click="showInformationDetail(row)" v-if="row.isApprove"> 查看详情
              </el-button>
              <el-button type="primary" size="small" text @click="showInformationDetail(row)" v-else> 审批 </el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>
  </div>
  <div v-if="showReport">
    <div class="main">
      <PureTableBar class="list_hei" title="发行公告列表">
        <template v-slot="{ size, checkList }">
          <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" size="small" :data="reportList"
            :columns="columns1" :checkList="checkList" max-height="520" :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }">
            <template #operation="{ row }">
              <el-button type="primary" size="small" text @click="showReportDetail(row)"> 查看详情 </el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>
  </div>
  <!-- //发行公告窗口 -->
  <ReDialog :width="1000" :height="500" :models="announcementDialog" @Closes="announcementDialog = false">
    <template #header>
      <h2 style="text-align: center;">{{ announcementData.tittle }}</h2>
    </template>
    <template #main>
      <div style="text-align: start;">
        <div>自{{ announcementData.year }}年{{ announcementData.month }}月{{ announcementData.day
        }}日起，{{ allNeedDay.stockExchangeName }}将在固定收益证券综合电子平台（以下简称“固定收益平台”）为“{{ announcementData.name
}}”（以下简称“XX”）提供转让服务。现就有关事项公告如下：</div>
        <div>
          一、已在中国证券登记结算有限责任公司上海分公司开立证券账户的资产支持证券合格投资者可以参与“XX”转让业务；经{{ allNeedDay.stockExchangeName
          }}核准的固定收益平台交易商可以进行“XX”的转让和转让代理业务；经{{ allNeedDay.stockExchangeName }}核准的固定收益平台一级交易商可以对“XX”持续提供双边报价及对询价提供成交报价。
        </div>
        <div>二、{{ allNeedDay.stockExchangeName }}固定收益平台的交易时间为每个交易日的上午9：30－11：30、下午13：00-15：00。固定收益平台用户可在交易日的9：00-9：30登录{{
          allNeedDay.stockExchangeName }}固定收益平台，进行转让开始前的准备工作。 
        </div>
        <div>
          三、“XX”共有XX个品种。“优先级资产支持证券01”预期到期日为XX年XX月XX日，转让代码为XXXXXX；“优先级资产支持证券02”预期到期日为XX年XX月XX日，转让代码为XXXXXX。{{
            allNeedDay.stockExchangeName }}将于XX年XX月XX日开始为“XX资产支持专项计划”提供转让服务。 
        </div>
        <div>
          四、“XX资产支持专项计划”的转让计价单位为份（面值100元人民币），转让价格最小变动单位为人民币0.001元，转让按净价申报；转让单位为手，1手等于10份；转让数量最少为50手，转让数量最小变动量为50手；转让申报价格实行涨跌幅限制，涨跌幅比例为10%。转让数量和价格由交易商根据前款规定进行报价交易或询价交易。 
        </div>
        <div>
          五、XX公司将根据有关规定在其网站上公布“XX资产支持专项计划”定期报告和临时报告。 特此公告。 附件：资产支持证券信息表（参考格式，具体格式请见文件包中的单独表格） 
        </div>
      </div>
      <div style="display: flex;justify-content: end;">
        【{{ allNeedDay.stockExchangeName }}】 {{ announcementData.year }}年{{ announcementData.month }}月{{
          announcementData.day
        }}日
      </div>
    </template>
  </ReDialog>

  <!-- //审批窗口 -->
  <ReDialog :width="800" :height="400" :models="approveDialog" @Closes="approveDialog = false">
    <template #header>
      <h2 style="text-align: center;">项目审批窗口</h2>
    </template>
    <template #main>
      <div style="display: flex;justify-content: start;flex-wrap: wrap;padding: 0 20px;">
        <div class="triangle2" v-for="(item, index) in declareList" :key="index" @click="showInformation(item)">
          <div class="triangle1">
            {{ item.name }}
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="saveApprove()" v-if="!isApprove"> 审批通过 </el-button>
        <el-button @click="approveDialog = false" v-if="!isApprove"> 取消 </el-button>
      </span>
    </template>
  </ReDialog>
  <!-- 添加方案窗口 -->
  <ReDialog :width="800" :height="550" :models="informationDialog" @Closes="informationDialog = false">
    <template #header>
      <h2 style="text-align: center;">{{ selectName }}{{ selectItem.name }}</h2>
    </template>
    <template #main>
      <!-- 资料准备 -->
      <div v-if="selectItem.name == '资料准备'" style="display:flex;justify-content: center;">
        <InformationParpre />
      </div>
      <!-- 项目初步评估 -->
      <div v-if="selectItem.name == '项目初步评估'" class="h-full flex justify-center items-center">
        <table>
          <tr>
            <td width="200px">律师</td>
            <td>沟通合规性</td>
          </tr>
          <tr>
            <td>评级机构</td>
            <td>沟通预评级（增信措施、影子评级、分层预判）</td>
          </tr>
          <tr>
            <td>会计师</td>
            <td>沟通出表操作</td>
          </tr>
          <tr>
            <td>交易所or机构间报价系统审核人</td>
            <td>预沟通可操作性</td>
          </tr>
        </table>
      </div>
      <div v-if="selectItem.name == '出具项目方案'">
        <SpvProjectCase :data="projectpProposalsData" :allData="allNeedDay" />
      </div>
      <div v-if="selectItem.name == '尽职调查'" class="h-full flex justify-center items-center">
        <table>
          <tr>
            <td width="200px">对主体</td>
            <td>主体包括原始权益人、资产服务机构（一般是原始权益人）、托管人；<br>
              如果有外部增信机制，则包括对差额支付人、担保人等；<br>
              如果有嵌套信托计划，则包括对信托受托人。
              主要是对主体的基础情况、业务情况、财务状况、相关制度、相关资质等进行尽职调查。
            </td>
          </tr>
          <tr>
            <td>对基础资产</td>
            <td>基础资产形成与存续的合法性、真实性、完整性；<br>
              基础资产权属、涉诉、权利限制和负担等情况；<br>
              基础资产转让合法性；<br>
              现金流稳定性、历史记录、未来预测。</td>
          </tr>
        </table>
      </div>

      <!-- 项目申报 -->
      <div v-if="selectItem.name == '挂牌转让申请书'" class="h-full flex justify-center  f-14 flex-direction-column">
        <h3>{{ allNeedDay.stockExchangeName }}</h3>
        <p> &nbsp;&nbsp; &nbsp;&nbsp;{{ allNeedDay.spvName
        }}拟通过设立资产支持专项计划，发行xx资产支持证券并申请在贵所挂牌转让xx公司承诺，本转让申请书所列明的信息及贵所提交的挂牌转让申请材料真实.准确完整，本资产支持证券的参与方具有相关业务资质符合《证券公司及基金管理公司子公司资产证券化业务管理规定》和《{{
  allNeedDay.stockExchangeName }}资产证券化业务指引》等相关规定，并愿就此承担相应法律责任。现特就xx资产支持证券向贵所提交挂牌转让申请材料，请予接受。
        </p>
        <div style='display:flex;justify-content: end;'>管理人名称：{{ allNeedDay.spvName
        }}</div>
      </div>
      <div v-if="selectItem.name == '计划说明书'" class="h-full flex justify-center items-center">
        <p>第一章 当事人的权利和义务 1.1资产持证持有人的权利与务 1.2管理人的权利与义务 1.3 托管人的权利与义务 1.4 其他参与机构的权利与义务 <br>第二章 资产支持证券的基本情况，包括:
          发行规模、品种、期限、预期收益率、资信评级状况(如有)以及登记、托交易场所等基本情况 <br>第三章 专项计划的交易结构与相关方简介 3.1 项目参与方基本信明自，包括:联系人、联系方式、办公地址等
          3.2交易结构，主要包括:交易结构概述、交易结构图、交易相关方所担任的角色和相关权利义务说明 <br>第四章
          专项计划的信用增级方式包括专项计划采用增信方式的种类。各项信用增级方式的主要条款、触发条件及时点。若资产支持专项计划采用多种增信方式，明确各种增信方式的触发先后顺序。<br> 第五章
          特定原始权益人、管理人和其他主要业务参与人情况</p>
      </div>
      <div v-if="selectItem.name == '法律意见书'" class="h-full flex justify-center  f-14 flex-direction-column">
        <h3>须包含以下内容：</h3>
        <p> &nbsp;&nbsp; &nbsp;&nbsp;1原始益人管理人、销售机构、托管人、增信机构等证券化服务机构的资质及权限<br>&nbsp;&nbsp;
          &nbsp;&nbsp;2.计划说明书资产转让协议、托管协议、认购协议等法律文件的合规性
          <br>&nbsp;&nbsp; &nbsp;&nbsp;3.基础资产的真实性、合法性、权利归属及其负担情况、特定化、完整性 <br>&nbsp;&nbsp;
          &nbsp;&nbsp;4.基础资产转让行为的合法性<br>&nbsp;&nbsp; &nbsp;&nbsp;5.基础资产未被列入负面清单的相关意见<br> &nbsp;&nbsp;
          &nbsp;&nbsp;6.风险隔离的效果<br>&nbsp;&nbsp; &nbsp;&nbsp;7.环购买(如有)安排的有效性
          <br>&nbsp;&nbsp; &nbsp;&nbsp;8.专项计划信用增级安排的合法性、有效性<br>&nbsp;&nbsp; &nbsp;&nbsp;9.有可能影响资产支持证券投资者利益的其他重大事项的意见。
          请专项计划律师通过央行出具的《企业信用报告》、被执行人信息查询系统(http://zhixing.cou.gov.cn/)
          和最高人民法院的“全国法院失信被执行/名单信息公布与查询系统”查询特定原始权益人的资信情况，明确说明其是否为失信被执行
        </p>
      </div>
      <div v-if="selectItem.name == '信用评级报告'" class="h-full flex justify-center  f-14 flex-direction-column">
        <div
          style="display: flex;
                                                                                                                                              justify-content: center;">
          <table
            style="width: 70%;
                                                                                                                                            text-align: center;margin-top:30px">
            <thead>
              <tr>
                <th width="10%">资产支持证券</th>
                <th width="10%">发行额（元）</th>
                <th width="10%">占比（%）</th>
                <th width="10%">利率</th>
                <th width="10%">预定评级</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in reportData.creditEnhancementRanking" :key="index">
                <td>{{ item.priorityName }}</td>
                <td>{{ item.issuanceMoney }}</td>
                <td>{{ item.sizePercentage }}</td>
                <td>{{ item.interestRate }}%</td>
                <td>{{ item.preGrade }}</td>
              </tr>
              <tr>
                <td>合计</td>
                <td>{{ reportData.issuanceAmount }}</td>
                <td>100</td>
                <td></td>
              </tr>
              <tr>
                <td>起始结算日</td>
                <td colspan="4">{{ reportData.initialStartDate.substring(0, 10) }}</td>
              </tr>
              <tr>
                <td>法定最终到期日</td>
                <td colspan="4">{{ reportData.legalFinalMaturityDate.substring(0, 10) }}</td>
              </tr>
              <tr>
                <td>入池资本</td>
                <td colspan="4">金融有限公司的应收账款债权</td>
              </tr>
              <tr>
                <td>本金余额</td>
                <td colspan="4">人民币{{ reportData.principalBalance }}元</td>
              </tr>
              <tr>
                <td>发起/服务机构</td>
                <td colspan="4">金融公司</td>
              </tr>
              <tr>
                <td>受托机构</td>
                <td colspan="4">{{ reportData.trusteeSpv }}</td>
              </tr>
              <tr>
                <td>评级观点</td>
                <td colspan="4" style="text-align: start;">
                  XX信用评级有限公司对本期交易所涉及的基础资产、交易结构、现金流、法律要素、有关参与方履约及操作风险等因素进行了考量，考虑到资产池涉及借款人众多，分散性良好，而且贷款信用保证保险提供机构偿付能力强，信用水平极高，能更好地履行理赔义务，在此基础上确定；<br>
                  “{{
                    selectName }}”的评级结果为：{{ allNeedDay.resultStr }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div v-if="selectItem.name == '主要交易合同文本'" class="h-full flex justify-center  f-14 flex-direction-column">
        <table>
          <tr>
            <td width="200px">专项计划标准条款</td>
            <td>
            </td>
          </tr>
          <tr>
            <td>资产支持证券认购协议与风险揭示
              书</td>
            <td>请严格接照中国证券授资基金业协会要求格式起草，新增内容可以加在协会提供的格式版本条款之后。</td>
          </tr>
          <tr>
            <td>专项计划资产买卖协议</td>
            <td rowspan="8">
              专项计划增信方式包括担保，差额支付承诺的，首次申请时应提供担保人，差额支付承诺人关于提供担保。差额支付的盖章版内部投权文件，须经主管机关批准，核准或同意的，应提供相应主管部门的批准，核准或同意的文件。
            </td>
          </tr>
          <tr>
            <td>专项计划托管协议</td>
          </tr>
          <tr>
            <td>专项计划监管协议(若有)</td>
          </tr>
          <tr>
            <td>担保协议或担保面，担保人就提供担保获得的投权文件(若有)</td>
          </tr>
          <tr>
            <td>差额支付承诺面，差额支付承诺人就提供差额支付获得的授权文件</td>
          </tr>
          <tr>
            <td>专项计划资产服务协议</td>
          </tr>
          <tr>
            <td>其他补充合同</td>
          </tr>
        </table>
      </div>
      <div v-if="selectItem.name == '其他中介报告'" class="h-full flex justify-center  f-14 flex-direction-column">
        <table>
          <tr>
            <td width="300px">特定原始权益人最近3年(未满 3年的自成立之日起)经审计的财务报告、融资情况说明(裁至最近一期)(附件十二)，最近一期财务报告或会计报表</td>
            <td>首次申请时提交盖章版扫描件。
            </td>
          </tr>
          <tr>
            <td>担保人（差额文付承诺人参照） 最近一年经审计的财务报告，最近一期财务报表</td>
            <td>首次申请时提交盖章版扫描件</td>
          </tr>
          <tr>
            <td>关于专项计划会计处理意见的说明</td>
            <td>会计出表的需提供专项计划会计处理意见的说明</td>
          </tr>
          <tr>
            <td>基础资产转让评估报告/现金流预测分析报告</td>
            <td>
              本所出具无异议函前，现金流预测分析报告应加盖出具人的公章。该报告原则上应由计划管理人、原始权益人之外，具有从事证券、期货相关业务资格的第三方机构出具。若非由第三方机构出具或第三方机构不为会计师事务所的，则应由会计师事务所对报告真实性、合法性进行认证，报告正文应加盖认证机构公章，签章页应加盖出具人与认证机构的公章。
            </td>
          </tr>
        </table>
      </div>
      <div v-if="selectItem.name == '其他资料'" class="h-full flex justify-center  f-14 flex-direction-column">
        <table>
          <tr>
            <td width="300px">法律生规或原始权益人公司章程规定的有权机构关于开展资产证券化融资相关事宜的决议
            </td>
            <td>由具无异议函前管理人盖章
            </td>
          </tr>
          <tr>
            <td width="300px">原始权益人募集资金用途专项说明与承诺
            </td>
            <td>相关决议首次提交材料时原始权益人盖章
            </td>
          </tr>
          <tr>
            <td width="300px">原始权益人关于基础资产及其特征安排真实性、合法性的承诺函
            </td>
            <td>出具无异议函前原始权益人盖章
            </td>
          </tr>
          <tr>
            <td width="300px">管理人、托管人有关防范利益冲突的说明(无特殊利益冲突情况，可并入计划说明书)
            </td>
            <td>出具无异议函前原始权益人盖章
            </td>
          </tr>
          <tr>
            <td width="300px">基础资产未被列入负面清单的专项声明
            </td>
            <td>出具无异议函前管理人，托管银行分别盖章
            </td>
          </tr>
          <tr>
            <td width="300px">合规负责人的合规意见
            </td>
            <td>首次提交材料时管理人盖章
              针对项目具体情况，待别是对基础资产可能会被列入负面清单的情况详细说明。举例：租赁债权的承租人不违反负面清单第一条及第二条的相关要求，须对上述核查情况补充说明。
            </td>
          </tr>
          <tr>
            <td width="300px">交易所要求的其他文件
            </td>
            <td>
              首次提交材料时管理人盖章
              管理人是否履行了内核程序，以及内核关注的主要问题、解决情况以及内核意见。
            </td>
          </tr>
        </table>
      </div>
    </template>
  </ReDialog>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);


.triangle {
  position: relative;
  cursor: pointer;
  border: 2px solid #333;
  width: 22%;
  height: 150px;
  margin-right: 10%;
  margin-top: 20px;
  background: linear-gradient(to top right,
      rgba(0, 0, 0, 0)0%,
      rgba(0, 0, 0, 0)calc(50% - 1.5px),
      rgba(0, 0, 0, 1)50%,
      rgba(0, 0, 0, 0)calc(50% + 1.5px),
      rgba(0, 0, 0, 0)100%),
    linear-gradient(to bottom right,
      rgba(0, 0, 0, 0)0%,
      rgba(0, 0, 0, 0)calc(50% - 1.5px),
      rgba(0, 0, 0, 1)50%,
      rgba(0, 0, 0, 0)calc(50% + 1.5px),
      rgba(0, 0, 0, 0)100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.triangle1 {
  border: 1px solid #fff;
  background: #fff;
  text-align: center;
}

.triangle2 {
  position: relative;
  cursor: pointer;
  border: 2px solid #333;
  width: 15%;
  height: 130px;
  margin-right: 10%;
  margin-top: 20px;
  background: linear-gradient(to top right,
      rgba(0, 0, 0, 0)0%,
      rgba(0, 0, 0, 0)calc(50% - 1.5px),
      rgba(0, 0, 0, 1)50%,
      rgba(0, 0, 0, 0)calc(50% + 1.5px),
      rgba(0, 0, 0, 0)100%),
    linear-gradient(to bottom right,
      rgba(0, 0, 0, 0)0%,
      rgba(0, 0, 0, 0)calc(50% - 1.5px),
      rgba(0, 0, 0, 1)50%,
      rgba(0, 0, 0, 0)calc(50% + 1.5px),
      rgba(0, 0, 0, 0)100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.iocn {
  width: 50px;
  font-size: 20px;
  display: inline-block;
  padding: 2px;
  color: #409Eff;
}

table,
th,
td {
  border: 1px solid #bab9b9;
  border-collapse: collapse;
}

.table-center {
  margin-top: 20px;
  text-align: center;
}


:deep(.el-input__inner) {
  text-align: center;
}

.blue-text {
  color: #409Eff
}

:deep(.el-form-item__label) {
  font-weight: 700;
  font-size: 14px
}

.login {
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0 6px;
  border: 1px solid #ccc !important;
  border-radius: 2px;
}

.tick::after {
  content: " ";
  position: absolute;
  display: inline-block;
  width: 12px;
  height: 6px;
  border-width: 0 0 2px 2px;
  overflow: hidden;
  border-color: #409Eff;
  border-style: solid;
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
  left: 3px;
  top: 4px;
}

.f-14 {
  font-size: 14px;
}

.flex-direction-column {
  flex-direction: column
}
</style>
